<template>
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  
  // 定义一个可响应的状态变量
  const count = ref(0);
  
  // 增加计数
  const increment = () => {
    count.value++;
  };
  
  // 减少计数
  const decrement = () => {
    count.value--;
  };
  
  // 当组件被挂载时执行
  onMounted(() => {
    console.log('Counter component is mounted.');
  });
  
  // 当组件即将卸载时执行
  onBeforeUnmount(() => {
    console.log('Counter component is about to be unmounted.');
  });
  </script>